<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", -10);

	//String planeId = (String) request.getAttribute("plane_id");
	//String orgName = (String) request.getAttribute("org_name");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.5 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css"
	rel="stylesheet">
<!-- DataTables -->
<link rel="stylesheet"
	href="../../plugins/datatables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../../index.css">
<link rel="stylesheet" href="../../device/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
</style>
</head>

<body>
	<div>
		<div class="bg-custom">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>监控视图</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
					<li class="">监控视图</li>
					<li class="active">网络拓扑视图</li>
				</ol>
			</section>
			<!-- 统计信息页面 -->
			<div class="row">
				<div class="col-md-12 padding-right-12">
					<div class="dashboard-panel margin-right-15 ">
						<div class="row device_dash_panel">
							<div class="row titleStyle">
								<div class="col-xs-12 padding-left-0">
									<img src="../../mainpage/img/blue_line.png" />
									<lable>&nbsp;&nbsp;网络拓扑</lable>
								</div>
							</div>
							<div id="nt_plane_container">
								<!-- 
								<div
									style="position: absolute; left: 30px; top: 50px; z-index: 900;">
									<img style="width: 50%; height: 50%;"
										src="../../device/img/status.png"></img>
								</div> -->
								<canvas height="768px" id="nt_topo_canvas"></canvas>

								<div class="row"
									style="position: absolute; left: 20px; top: 600px; z-index: 900;">
									<div class="col-md-12 col-lg-12 padding-right-12">
										<div class="dashboard-panel margin-right-15 ">
											<div class="row device_dash_panel">

												<div>
													<div class="row padding-lr-15 padding-tb-10">
														<table id="nt_link"
															class="table table-condensed  dashboard-panel-table"
															style="width: 500px;">

															<thead>
																<th>链路</th>
																<th>业务监控</th>
																<th>时延</th>
																<th>丢包率</th>
																<th>网络是否可达</th>

															</thead>



														</table>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>



		</div>


	</div>




	<!-- ./wrapper -->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script src="//cdn.bootcss.com/echarts/2.2.7/echarts.js"></script>
	<script src="../../plugins/jtopo/jtopo-0.4.8-min.js"></script>
	<script src="../../plugins/jtopo/jtopo-util.js"></script>

	<script src="../../plugins/common/common-util.js"></script>
	<script src="../../plugins/jsutil/MapUtil.js"></script>
	<script src="../../device/js/device-kpi.js"></script>
	<script src="../../device/js/device-flowmon.js"></script>
	<script src="../../device/js/device-warnmon.js"></script>



	<script src="../../nettopo/js/main.js"></script>

	<!-- page script -->
	<script type="text/javascript">
		$(function() {
			var canvas = $('#nt_topo_canvas');
			$(window).resize(resizeCanvas);
			function resizeCanvas() {
				canvas.attr("width", $(window).get(0).innerWidth - 50);
			}
			;

			resizeCanvas();
			NET_TOPO.loadTopo();
			$('#nt_link').DataTable(dp_dataTableconfig);

		});
	</script>
</body>
</html>
